<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0px;
				width: 100%;
				height: 100%;
			}

			.div1 {
				position: absolute;
				width: 100%;
				height: 100%;
				background: url(./css/venom3.jpg) no-repeat;
				background-size: 100% 100%;
				margin: 0px;
				z-index: -1;
			}

			.div2 {
				height: 60px;
				overflow: hidden;
				border: 1px solid black;
				opacity: 0.4;
				background-color: black;
			}

			.l3 {
				text-align: center;
				width: 50px;
				height: 20px;
				border-radius: 20%;
				border: 1px solid white;
				float: right;
				margin-top: 20px;
				color:  blue;
				list-style-type: none;

			}

			.l4 {
				text-align: center;
				width: 50px;
				height: 20px;
				border-radius: 20%;
				border: 1px solid white;
				float: right;
				margin-top: 20px;
				margin-right: 10px;
				color:  blue;
				list-style-type: none;
			}

			.l5 {
				text-align: center;
				width: 50px;
				height: 20px;
				border-radius: 20%;
				border: 1px solid white;
				float: right;
				margin-top: 20px;
				margin-right: 10px;
				color:  blue;
				list-style-type: none;
			}

			.l1 {
				color: blue;
				font-size: 20pt;
				float: left;
				margin: 0px;
				transform: rotateZ(20deg);
				list-style-type: none;
			}

			.l2 {
				color: blue;
				font-size: 30pt;
				float: left;
				margin: 10px;
				transform: rotateZ(5deg);
				list-style-type: none;
			}
			.div6{
				margin-top: 50px;
				margin-left: 60px;
				width: 100px;
				height: 110px;
				
			}
			/* .div4{
				 transition: width 2s,height 2s;
			} */
			/* .div4:hover{
				width: 150px;
				height: 150px;
					 transform: rotate(0deg);
			} */
			.div5{
				margin-top: 0px;
				text-align: center;
				text-decoration: underline;
				
			}
			.img1{
				
				 transition: width 2s,height 2s;
			}
			.img1:hover{
				transform: rotate(0deg);
				width: 150px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
			<div class="div2">
				<li class="l1"><a>We are</a></li>
				<li class="l2"><a>Venom</a></li>
				<li class="l3"><a>毒液</a></li>
				<li class="l4"><a>屠杀</a>
				<li class="l5"><a>嚎叫</a></li>
				</div>
				<div class="div6">
					<div class="div4">
					<img src="css/venom1.jpg" width="100px" class="img1" /></div>
				 <div class="div5"><a>毒液</a></div>
				 </div>
				 <div class="div6">
				 	<div class="div4">
				 	<img src="css/venom2.jpg" width="100px" class="img1" /></div>
				  <div class="div5"><a>毒液XX</a></div>
				  </div>
				  <div class="div6">
				  	<div class="div4">
				  	<img src="css/venom3.jpg" width="100px" class="img1" /></div>
				   <div class="div5"><a>毒液QQ</a></div>
				   </div>
				   <div class="div6">
				   	<div class="div4">
				   	<img src="css/venom5.jpg" width="100px" class="img1" /></div>
				    <div class="div5"><a>毒液WW</a></div>
				    </div>
			</div>
	</body>
</html>
